<link href="mini.css" rel="stylesheet" type="text/css">
<style>
body{
	background: url(dragging.png);
}
</style>
<canvas id="canvas"></canvas>
<div id="reset" onclick="reset()">重置</div>

<script>
var TILE_SIZE = 50;
var PEEP_SIZE = 50;

var GRID = [
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[1,1,1,1,2,1,1,1,2,1,2,2,2,2],
	[1,1,1,2,1,2,1,2,1,2,1,2,2,2],
	[1,1,2,2,2,1,2,1,2,1,1,0,2,2]
];
</script>
<script src="../lib/Mouse.js"></script>
<script src="mini.js"></script>
<script src="mini_blah.js"></script>

<script>
function SpecialDraggable(x,y){
	
	var self = this;
	self.x = x;
	self.y = y;
	self.gotoX = x;
	self.gotoY = y;

	var offsetX, offsetY;
	var pickupX, pickupY;
	self.pickup = function(){

		IS_PICKING_UP = true;

		pickupX = (Math.floor(self.x/TILE_SIZE)+0.5)*TILE_SIZE;
		pickupY = (Math.floor(self.y/TILE_SIZE)+0.5)*TILE_SIZE;
		offsetX = Mouse.x-self.x;
		offsetY = Mouse.y-self.y;
		self.dragged = true;

		// Dangle
		self.dangle = 0;
		self.dangleVel = 0;

		// Draw on top
		var index = draggables.indexOf(self);
		draggables.splice(index,1);
		draggables.push(self);

	};

	self.drop = function(){

		IS_PICKING_UP = false;

		var px = Math.floor(Mouse.x/TILE_SIZE);
		var py = Math.floor(Mouse.y/TILE_SIZE);
		if(px<0) px=0;
		if(px>=GRID_SIZE_WIDTH) px=GRID_SIZE_WIDTH-1;
		if(py<0) py=0;
		if(py>=GRID_SIZE_HEIGHT) py=GRID_SIZE_HEIGHT-1;
		var potentialX = (px+0.5)*TILE_SIZE;
		var potentialY = (py+0.5)*TILE_SIZE;

		var spotTaken = false;
		for(var i=0;i<draggables.length;i++){
			var d = draggables[i];
			if(d==self) continue;
			var dx = d.x-potentialX;
			var dy = d.y-potentialY;
			if(dx*dx+dy*dy<10){
				spotTaken=true;
				break;
			}
		}

		if(spotTaken){
			self.gotoX = pickupX;
			self.gotoY = pickupY;
		}else{

			self.gotoX = potentialX;
			self.gotoY = potentialY;
		}

		self.dragged = false;

	}

	var lastPressed = false;
	self.update = function(){

		// Shakiness?
		self.shaking = false;
		self.bored = false;

		/*if(!self.dragged){
			var neighbors = 0;
			var same = 0;
			for(var i=0;i<draggables.length;i++){
				var d = draggables[i];
				if(d==self) continue;
				var dx = d.x-self.x;
				var dy = d.y-self.y;
				if(dx*dx+dy*dy<DIAGONAL_SQUARED){
					neighbors++;
					if(d.color==self.color){
						same++;
					}
				}
			}
			if(neighbors>0){
				self.sameness = (same/neighbors);
			}else{
				self.sameness = 1;
			}
			if(self.sameness<BIAS || self.sameness>NONCONFORM){
				self.shaking = true;
			}
			if(self.sameness>0.99){
				self.bored = true;
			}
		}*/

		self.shaking = true;

		// Dragging
		if(!self.dragged){
			if(/*self.shaking && */Mouse.pressed && !lastPressed){
				var dx = Mouse.x-self.x;
				var dy = Mouse.y-self.y;
				if(Math.abs(dx)<PEEP_SIZE/2 && Math.abs(dy)<PEEP_SIZE/2){
					self.pickup();
				}
			}
		}else{
			self.gotoX = Mouse.x - offsetX;
			self.gotoY = Mouse.y - offsetY;
			if(!Mouse.pressed){
				self.drop();
			}
		}
		lastPressed = Mouse.pressed;

		// Going to where you should
		self.x = self.x*0.5 + self.gotoX*0.5;
		self.y = self.y*0.5 + self.gotoY*0.5;

	};

	self.frame = 0;
	self.blinking=0;
	self.draw = function(){
		ctx.save();
		ctx.translate(self.x,self.y);
		
		if(!IS_PICKING_UP){
			self.frame+=0.07;
			ctx.translate(0,20);
			ctx.rotate(Math.sin(self.frame-(self.x+self.y)/200)*Math.PI*0.05);
			ctx.translate(0,-20);
		}

		// Blinking
		if(Math.random()<0.01){
			self.blinking=10;
		}

		// Draw thing
		var img;
		if(self.blinking>0){
			self.blinking--;
			img = images.yaySquareBlink;
		}else{
			img = images.yaySquare;
		}

		// Dangle
		if(self.dragged){
			self.dangle += (lastMouseX-Mouse.x)/100;
			ctx.rotate(-self.dangle);
			self.dangleVel += self.dangle*(-0.02);
			self.dangle += self.dangleVel;
			self.dangle *= 0.9;
		}

		/**
		ANGER
		ctx.translate(Math.random()*4-2,Math.random()*4-2);
		ctx.rotate(Math.random()*0.2-0.1);
		**/

		ctx.drawImage(img,-PEEP_SIZE/2,-PEEP_SIZE/2,PEEP_SIZE,PEEP_SIZE);
		ctx.restore();
	};

}

function isDone(){
	if(IS_PICKING_UP) return false;
	var d = draggables[41];
	return( Math.abs(d.x-575)<10 && Math.abs(d.y-275)<10 );
}

window.reset = function(){

	START_SIM = false;

	draggables = [];
	for(var y=0;y<GRID.length;y++){
		for(var x=0;x<GRID[y].length;x++){

			var data = GRID[y][x];
			if(data==0) continue;

			var xx = TILE_SIZE*(x+0.5);
			var yy = TILE_SIZE*(y+0.5);

			var draggable = new Draggable(xx,yy);
			draggable.color = (data==2) ? "triangle" : "square";
			draggables.push(draggable);

		}
	}

	// ADD A SINGLE SWINGER
	var draggable = new SpecialDraggable(TILE_SIZE*1.5,TILE_SIZE*1.5);
	draggable.color = "square";
	draggables.push(draggable);

	// Write stats for first time
	for(var i=0;i<draggables.length;i++){
		draggables[i].update();
	}

};

</script>